<template>
    <div class="course-select-home-page">
        <el-card v-if="routeName !== 'Help.Admin.Form'">
            <el-tabs v-model="activeName">
                <el-tab-pane label="问题管理" name="Help.Admin.List"></el-tab-pane>
                <el-tab-pane label="问题分类" name="Help.Admin.Category"></el-tab-pane>
                <el-tab-pane label="产品日志管理" name="Help.Admin.Product"></el-tab-pane>
                <el-tab-pane label="帮助中心介绍" name="Help.Title">
                    <el-input
                        rows="10"
                        type="textarea"
                        v-model="helpContent"
                        class="input-width"
                        placeholder="请输入帮助中心介绍"></el-input>
                    <div class="mt-4 text-center">
                        <el-button :loading="loading" type="primary" @click="onHelpContent">确定</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <div class="mt-4" v-if="activeName !== 'Help.Title'">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { Tabs, TabPane } from 'element-ui';

export default {
    components: {
        ElTabs: Tabs,
        ElTabPane: TabPane,
    },
    data() {
        return {
            activeName: 'Help.Admin.List',
            loading: false,
            helpContent: '',
        };
    },
    computed: {
        routeName() {
            return this.$route.name;
        },
    },
    watch: {
        activeName(val) {
            if (val !== 'Help.Title') {
                this.$router.push({name: val});
            } else {
                this.getHelpContent();
            }
        },
    },
    methods: {
        onHelpContent() {
            const helpContent = this.helpContent.replace(/\n/g, '<br/>');

            this.loading = true;
            API.put('help_center', {content: helpContent}).then(() => {
                $ele.$message.success('编辑成功');
            }).finally(() => {
                this.loading = false;
            });
        },
        getHelpContent() {
            API.get('help_center').then(res => {
                this.helpContent = res.content.replace(/<br\/>/g, '\n');
            });
        },
    },
    mounted() {
        this.activeName = this.$route.name;
    },
};
</script>

<style lang="scss">
</style>
